﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Columns in Different Colors</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "$timeout", "IntegralUITreeGridService", function($scope, $timeout, $gridService){
				$scope.gridName = "gridSample";
				$scope.gridLines = 'both';
				$scope.colorScheme = 1;

				var redColumn = {
					header: {
						normal: 'header-red'
					},
					footer: {
						normal: 'footer-red',
						hovered: 'footer-red',
						selected: 'footer-red'
					}
				}

				var greenColumn = {
					header: {
						normal: 'header-green'
					},
					footer: {
						normal: 'footer-green',
						hovered: 'footer-green',
						selected: 'footer-green'
					}
				}

				var blueColumn = {
					header: {
						normal: 'header-blue'
					},
					footer: {
						normal: 'footer-blue',
						hovered: 'footer-blue',
						selected: 'footer-blue'
					}
				}

				var redColumnLine = {
					header: { normal: 'header-red-line' },
					footer: { normal: 'footer-gray-line', hovered: 'footer-gray-line' }
				}

				var greenColumnLine = {
					header: { normal: 'header-green-line' },
					footer: { normal: 'footer-gray-line', hovered: 'footer-gray-line' }
				}

				var blueColumnLine = {
					header: { normal: 'header-blue-line' },
					footer: { normal: 'footer-gray-line', hovered: 'footer-gray-line' }
				}

				$scope.ctrlStyle = {}
				var customCtrlStyle = {
					column: {
						header: { 
							content: 'header-cell-content',
							hovered: 'column-hover-line',
							selected:  'column-selected'
						},
						footer: {
							hovered: 'footer-gray-line',
							selected:  'footer-gray-line'
						},
					},
					row: {
						general: {
							hovered: 'row-hovered',
							selected: 'row-selected'
						}
					},
					cell: {
						hovered: 'cell-hovered'
					}
				}


				$scope.columns = [
					{ name: 'Column1', headerText: 'Header1', headerAlignment: 'center', footerText: 'Footer1', width: 200, style: redColumn },
					{ name: 'Column2', headerText: 'Header2', headerAlignment: 'center', footerText: 'Footer2', width: 250, style: greenColumn },
					{ name: 'Column3', headerText: 'Header3', headerAlignment: 'center', footerText: 'Footer3', width: 120, style: blueColumn }
				];

				$scope.rows = [
					{ 
						id: 1,
						text: "Item1",
						cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }],
						rows: [
							{ id: 11, pid: 1, text: "Item11", cells: [{ text: "Item111" }, { text: "Item112" }, { text: "Item113" }] },
							{ 
								id: 12,
								pid: 1,
								text: "Item12",
								cells: [{ text: "Item121" }, { text: "Item122" }, { text: "Item123" }],
								rows: [
									{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211" }, { text: "Item1212" }, { text: "Item1213" }] },
									{ 
										id: 122,
										pid: 12,
										text: "Item122", 
										cells: [{ text: "Item1221" }, { text: "Item1222" }, { text: "Item1223" }],
										expanded: false,
										rows: [
											{ id: 1221, pid: 122, text: "Item1221", cells: [{ text: "Item12211" }, { text: "Item12212" }, { text: "Item12213" }] },
											{ id: 1222, pid: 122, text: "Item1222", cells: [{ text: "Item12221" }, { text: "Item12222" }, { text: "Item12223" }] }
										]
									},
									{ id: 123, pid: 12, text: "Item123", cells: [{ text: "Item1231" }, { text: "Item1232" }, { text: "Item1233" }] }
								]
							},
							{ id: 13, pid: 1, text: "Item13", cells: [{ text: "Item131" }, { text: "Item132" }, { text: "Item133" }] },
							{
								id: 14,
								pid: 1,
								text: "Item14",
								cells: [{ text: "Item141" }, { text: "Item142" }, { text: "Item143" }],
								expanded: false,
								rows: [
									{ id: 141, pid: 14, text: "Item141", cells: [{ text: "Item1411" }, { text: "Item1412" }, { text: "Item1413" }] },
									{ id: 142, pid: 14, text: "Item142", cells: [{ text: "Item1421" }, { text: "Item1422" }, { text: "Item1423" }] }
								]
							}
						]
					},
					{
						id: 2,
						text: "Item2",
						cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }],
						rows: [
							{ id: 21, pid: 2, text: "Item21", cells: [{ text: "Item211" }, { text: "Item212" }, { text: "Item213" }] },
							{ id: 22, pid: 2, text: "Item22", cells: [{ text: "Item221" }, { text: "Item222" }, { text: "Item223" }] },
							{
								id: 23,
								pid: 2,
								text: "Item23", 
								cells: [{ text: "Item231" }, { text: "Item232" }, { text: "Item233" }],
								expanded: false,
								rows: [
									{ id: 231, pid: 23, text: "Item231", cells: [{ text: "Item2311" }, { text: "Item2312" }, { text: "Item2313" }] },
									{ id: 232, pid: 23, text: "Item232", cells: [{ text: "Item2321" }, { text: "Item2322" }, { text: "Item2323" }] }
								]
							}
						]
					},
					{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }] }
				];

				$scope.$watch("colorScheme", function(newValue, oldValue){
					if (newValue != oldValue){
						switch (newValue){
							case '1':
								$scope.gridLines = 'both';
								$scope.ctrlStyle = null;

								for (var j = 0; j < $scope.columns.length; j++){
									switch (j){
										case 0:
											$scope.columns[j].style = redColumn
											break;
										case 1:
											$scope.columns[j].style = greenColumn
											break;
										case 2:
											$scope.columns[j].style = blueColumn
											break;
									}
								}
								break;

							case '2':
								$scope.gridLines = 'none';
								$scope.ctrlStyle = customCtrlStyle;

								for (var j = 0; j < $scope.columns.length; j++){
									switch (j){
										case 0:
											$scope.columns[j].style = redColumnLine
											break;
										case 1:
											$scope.columns[j].style = greenColumnLine
											break;
										case 2:
											$scope.columns[j].style = blueColumnLine
											break;
									}
								}
								break;
						}

						$gridService.updateView($scope.gridName);
					}
				});

				var initTimer = $timeout(function(){
					$gridService.updateLayout($scope.gridName);

					$timeout.cancel(initTimer);
				}, 1);

			}]);
    </script>
    <style type="text/css">
		/* TreeGrid settings */
    	 .header-cell-content
    	 {
    	 	margin-bottom: 3px;
    	 }
		/*Color Scheme 1 */
		.row-hovered
		{
			background: white;
		}
		.header-red
		{
			background: #be0000;
			border-color: #800000;
			color: white;
		}
		.header-green
		{
			background: #00be00;
			border-color: #008000;
			color: white;
		}
		.header-blue
		{
			background: #0000be;
			border-color: #000080;
			color: white;
		}
		.footer-red
		{
			background: #ff8020;
			border-color: #ce6412;
			color: white;
		}
		.footer-green
		{
			background: #80ce20;
			border-color: #64a112;
			color: white;
		}
		.footer-blue
		{
			background: #2080ff;
			border-color: #1264ce;
			color: white;
		}
		/*Color Scheme 2 */
		.column-hover-line
		{
			background: white;
			color: red;
		}
		.header-red-line
		{
			background: white;
			border-color: transparent;
			border-bottom: 2px solid #be0000;
		}
		.header-green-line
		{
			background: white;
			border-color: transparent;
			border-bottom: 2px solid #00be00;
		}
		.header-blue-line
		{
			background: white;
			border-color: transparent;
			border-bottom: 2px solid #0000be;
		}
		.footer-gray-line
		{
			background: white;
			border-color: white;
			border-top: 2px solid #cecece;
		}
		.column-hover-line
		{
			border-color: transparent;
			border-bottom: 2px solid #999999;
			color: red;
		}
		.column-selected
		{
			background: transparent;
			border-color: transparent;
			border-bottom: 2px solid #999999;
			font-weight: bold;
		}
		.footer-nocolor
		{
			background: transparent;
			border-color: transparent;
		}
		.row-hovered
		{
			background: transparent;
			color: blue;
		}
		.row-selected
		{
			background: transparent;
			color: red;
			font-weight: bold;
		}
		.cell-hovered
		{
			background: transparent;
		}

		/* Sample settings */
		.feature-content
		{
			width: 900px;
		}
		.directive
		{
			border: 0;
        	width: 600px;
        	height: 300px;
		}
		.control-panel
		{
			margin-left: 35px;
		}

    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Columns in Different Colors</h2>
	        <div class="feature-content">
	            <div style="display:inline-block">
	                <iui-treegrid name="{{gridName}}" class="directive" columns="columns" rows="rows" control-style="ctrlStyle" allow-focus="false" grid-lines="gridLines"></iui-treegrid>
	                <div class="control-panel">
						<label><input type="radio" ng-model="colorScheme" value="1" />Color Scheme 1</label><br/><br/>
						<label><input type="radio" ng-model="colorScheme" value="2" />Color Scheme 2</label>
	                </div>
                    <br style="clear:both;"/>
                </div>
                <div class="feature-help" style="margin:0">
                    <p><span class="initial-space"></span>This sample shows how to change the appearance of columns in TreeGrid.</p>
                    <p><span class="initial-space"></span>There are two color schemes to choose from, which will change the appearance of the TreeGrid. We are using custom CSS styles which are applied to the <span class="code-field">controlStyle</span> of the TreeGrid. This property accepts an object which defines how each part of the TreeGrid will look, whether it is a column, row or cell.</p>
                    <p><span class="initial-space"></span>For more information, check out the source code of this sample.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
